<template>
  <div class="files-index" @click="isRightMenuVisible = false">
    <!-- 文件夹导航 -->
    <div class="folder-nav">
      <a-button
        type="default"
        shape="circle"
        icon="left"
        :disabled="folderStack.length <= 1"
        @click="changeFolderStack(folderStack.length - 2)"
      ></a-button>
      <a-button type="default" shape="circle" icon="right" disabled></a-button>
      <a-button
        type="default"
        shape="circle"
        icon="sync"
        @click="refresh"
      ></a-button>
      <!-- 目录栈 -->
      <div
        v-for="(item, index) in folderStack"
        :key="index"
        class="folder-stack-item"
      >
        <a-button type="default" @click="changeFolderStack(index)">
          {{ item.folderName }}
        </a-button>
        <a-icon type="right"></a-icon>
      </div>
    </div>
    <!-- 列表头 -->
    <div class="list-header">
      <div>
        <span style="padding-left:36px">名称</span>
      </div>
      <div>类型</div>
      <div>大小</div>
      <div>修改时间</div>
    </div>
    <!-- 文件列表 -->
    <div class="file-list" @contextmenu.prevent="blancRightClick">
      <!-- 文件夹 -->
      <div
        v-for="(item, index) in folderList"
        :key="index"
        class="file-item"
        @contextmenu.prevent.stop="folderRightClick(item, $event)"
        @dblclick="handleOpenFolder(item)"
      >
        <div class="name">
          <a-icon type="folder"></a-icon>
          <span>{{ item.folderName }}</span>
        </div>
        <div class="type">文件夹</div>
        <div class="size">--</div>
        <div class="time">{{ item.createTime.slice(0, 19) }}</div>
      </div>
      <!-- 文件 -->
      <div
        v-for="(item, index) in fileList"
        :key="index + folderList.length"
        class="file-item"
        @contextmenu.prevent.stop="fileRightClick(item, $event)"
      >
        <div class="name">
          <a-icon type="file"></a-icon>
          <a-tooltip :title="item.fileName" :mouseEnterDelay="0.3">
            <span>{{ item.fileName }}</span>
          </a-tooltip>
        </div>
        <div class="type">文件</div>
        <div class="size">--</div>
        <div class="time">{{ item.createTime.slice(0, 19) }}</div>
      </div>
      <!-- 如果为空 -->
      <div v-if="!folderList.length && !fileList.length" class="list-empty">
        暂无
      </div>
    </div>
    <!-- 右键菜单 -->
    <div
      class="right-menu"
      v-if="isRightMenuVisible"
      :style="{
        left: rightMenuPoint.x,
        top: rightMenuPoint.y
      }"
    >
      <file-right-menu
        v-if="rightMenuInfo.type == 'file'"
        :id="rightMenuInfo.id"
        :parent-id="currentFolder.folderId"
        @delete="refresh"
      ></file-right-menu>
      <folder-right-menu
        v-else-if="rightMenuInfo.type == 'folder'"
        :id="rightMenuInfo.id"
        :name="rightMenuInfo.name"
        @open="handleOpenFolder"
        @rename="renameFolder"
        @delete="deleteFolder"
      ></folder-right-menu>
      <blank-right-menu
        v-else
        :folder-id="
          folderStack.length > 1
            ? folderStack[folderStack.length - 1].folderId
            : -1
        "
        @upload="uploadFile"
        @create="addFolder"
        @refresh="refresh"
        @sticked="refresh"
      ></blank-right-menu>
    </div>
  </div>
</template>
<script>
import FileRightMenu from '@/components/files/FileRightMenu.vue'
import FolderRightMenu from '@/components/files/FolderRightMenu.vue'
import BlankRightMenu from '@/components/files/BlankRightMenu.vue'
export default {
  components: { FileRightMenu, FolderRightMenu, BlankRightMenu },
  data() {
    return {
      fileList: [],
      folderList: [],
      // 文件夹面包屑的栈
      folderStack: [{ folderId: '0', folderName: '根目录' }],
      // 右键菜单是否显示
      isRightMenuVisible: false,
      // 右键菜单的位置
      rightMenuPoint: { x: 0, y: 0 },
      // 右键菜单的参数
      rightMenuInfo: {
        type: 'file',
        id: '',
        name: ''
      }
    }
  },
  computed: {
    currentFolder() {
      return this.folderStack[this.folderStack.length - 1]
    }
  },
  methods: {
    // 切换目录栈
    changeFolderStack(index) {
      if (index < this.folderStack.length - 1) {
        this.folderStack.splice(index + 1)
        this.refresh()
      }
    },
    // 右键点击
    folderRightClick(item, e) {
      this.rightMenuInfo = {
        type: 'folder',
        id: item.folderId,
        name: item.folderName
      }
      this.rightMenuPoint = { x: e.x + 'px', y: e.y + 'px' }
      this.isRightMenuVisible = true
    },
    fileRightClick(item, e) {
      this.rightMenuInfo = { type: 'file', id: item.fileId }
      this.rightMenuPoint = { x: e.x + 'px', y: e.y + 'px' }
      this.isRightMenuVisible = true
    },
    blancRightClick(e) {
      this.rightMenuInfo = { type: 'blank' }
      // TODO 有可能弹出的右键菜单超出窗口，就无法显示完全了
      this.rightMenuPoint = { x: e.x + 'px', y: e.y + 'px' }
      this.isRightMenuVisible = true
    },

    // 打开文件夹
    handleOpenFolder(folder) {
      this.folderStack.push({
        folderId: folder.folderId,
        folderName: folder.folderName
      })
      this.refresh()
    },
    // 新建文件夹
    addFolder(folderName) {
      if (this.currentFolder.folderId === '0') {
        this.$api.files.addRootFolder(folderName).then((res) => {
          this.refresh()
        })
      } else {
        this.$api.files
          .addFolder(this.currentFolder.folderId, folderName)
          .then((res) => {
            this.refresh()
          })
      }
    },
    // 获取根文件夹列表
    async getRootFolderList() {
      const rootCountRes = await this.$api.files.getRootFoldersCount()
      let count = 0
      if (rootCountRes.code === 200) count = rootCountRes.data
      this.$api.files
        .getRootFolders({
          current: 1,
          size: count
        })
        .then((res) => {
          this.folderList = res.data
        })
    },
    // 获取子文件夹列表
    async getFolderList() {
      const folderCountRes = await this.$api.files.getFoldersCount(
        this.currentFolder.folderId
      )
      let count = 0
      count = folderCountRes.data
      this.$api.files
        .getFolders(this.currentFolder.folderId, {
          current: 1,
          size: count
        })
        .then((res) => {
          this.folderList = res.data
        })
    },
    // 删除文件夹
    deleteFolder(folderId) {
      this.$api.files.deleteFolder(folderId).then((res) => {
        this.refresh()
        this.$message.success('删除成功')
      })
    },
    // 重命名文件夹
    renameFolder(folderId, folderName) {
      this.$api.files.renameFolder(folderId, folderName).then((res) => {
        this.refresh()
      })
    },

    // 上传文件
    uploadFile(folderId, file) {
      this.$api.files.uploadFile(folderId, file).then((res) => {
        this.refresh()
      })
    },
    // 获取文件列表
    async getFileList() {
      const fileCountRes = await this.$api.files.getFileCount(
        this.currentFolder.folderId
      )
      let count = 0
      count = fileCountRes.data
      this.$api.files
        .getFileList(this.currentFolder.folderId, {
          current: 1,
          size: count
        })
        .then((res) => {
          this.fileList = res.data
        })
    },

    // 刷新
    refresh() {
      // this.folderList = []
      if (this.currentFolder.folderId === '0') {
        this.getRootFolderList()
        this.fileList = []
      } else {
        this.getFolderList()
        this.getFileList()
      }
    }
  },
  mounted() {
    this.getRootFolderList()
  }
}
</script>
<style lang="less" scoped>
.files-index {
  height: 100%;
  // 文件夹导航
  .folder-nav {
    height: 48px;
    box-shadow: 0 0 10px -5px #666;
    display: flex;
    align-items: center;
    padding: 0 12px;
    .ant-btn {
      border: none;
      background: none;
    }
    .folder-stack-item {
      .anticon {
        font-size: 12px;
      }
    }
  }
  // 列表头
  .list-header {
    margin-top: 12px;
    padding: 0 24px;
    box-shadow: 0 0 10px -5px #666;
    height: 48px;
    display: flex;
    align-items: center;
    > div {
      flex: 1;
      &:first-child {
        padding-left: 24px;
      }
    }
  }
  // 文件列表
  .file-list {
    height: calc(~'100% - 120px');
    overflow: auto;
    margin-top: 12px;
    padding: 24px 24px;
    box-shadow: 0 0 10px -5px #666;
    .file-item {
      display: flex;
      align-items: center;
      height: 40px;
      user-select: none;
      border-bottom: 1px dotted #ccc;
      transition: background 0.5s;
      &:hover {
        background-color: fade(@primary-color, 10%);
      }
      > div {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .name {
        padding-left: 24px;
        .anticon {
          margin-right: 12px;
          font-size: 24px;
        }
      }
    }
    .list-empty {
      text-align: center;
      color: #ccc;
      font-weight: bold;
      font-size: 48px;
      padding: 48px 0;
    }
  }
  // 右键菜单
  .right-menu {
    width: 150px;
    box-shadow: 0 5px 20px -10px #666;
    position: fixed;
    background-color: #fff;
  }
}
</style>
